<template>
	<view class="warp">
		<c-navBar title="我的活动" is-tran></c-navBar>
		<view class="content">
			<c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
				<view class="activity-box" v-for="(item,index) in activityList" :key="index" @click="goDetails(item.id)">
					<view class="activity-boxLeft">
						<image :src="item.cover" style="width: 160rpx;height: 160rpx;" mode=""></image>
						
					</view>
					<view class="activity-boxRight">
						<p class="boxRight1">{{item.title}}</p>
						<view class="boxRight2" style="pabox-sizing: border-box; padding-top: 24rpx;">
							<image style="width: 18rpx;height: 18rpx;" src="../static/time-icon.png" mode=""></image>
							<p>{{item.activityTime!=null?item.activityTime.substring(0,10):''}}</p>
						</view>
						<view class="boxRight2" style="pabox-sizing: border-box; padding-top: 12rpx;">
							<image style="width: 18rpx;height: 18rpx;" src="../static/address-icon.png" mode=""></image>
							<p>{{item.address}}</p>
						</view>
						<view class="boxRight3">
							<text style="font-weight: bold;font-size:30rpx ;color: #1A1A1A;">{{item.userNum}}</text>/{{item.stock}}人报名
						</view>
					</view>
				</view>
			</c-scroll-list>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiParams: {
					// point: {
					// 	lat: "30.657437",
					// 	lng: "104.078304"
					// },
					"userId":uni.getStorageSync('user').userId
				}, //这是接口参数
				api: this.$api.myActivityList,
				activityList:[],//活动列表
					
			}
		},
		onLoad() {
			
			console.log(uni.getStorageSync('user').userId,'用户信息');
			this.$refs.list.refresh()
		},
		onShow(){
			// this.$refs.list.refresh()
		},
		methods:{
			// 活动列表
			load(res) {
				this.activityList = res.list
				console.log('活动列表', res);
			
			
			},
			// 活动详情
			goDetails(id){
				uni.navigateTo({
					url:`/pages/my/pages/activityDetails?id=${id}&&type=2`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		width: 100vw;
		min-height: 100vh;
		// background: linear-gradient(180deg, #E6F6E9 0%, #FFFFFF 33%, #FFFFFF 100%);
		padding-top: 200rpx;
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		height: calc(100vh - 150rpx);

		.activity-box {
			width: 686rpx;
			// height: 208rpx;
			padding: 24rpx 0rpx;
			margin: 0 auto;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			box-sizing: border-box;
			// justify-content: space-between;

			.activity-boxLeft {
				width: 160rpx;
				// height: 160rpx;
				border-radius: 12rpx 0rpx 0rpx 0rpx;
				// background-color: hotpink;
			}

			.activity-boxRight {
				margin-left: 28rpx;
			
				.boxRight1 {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					overflow: hidden;
					word-break: break-all;
					/* 允许在单词内换行 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					display: -webkit-box;
					/* 将对象作为伸缩盒子模型显示 */
					-webkit-box-orient: vertical;
					/* 设置或检索伸缩盒对象的子元素的排列方式，纵向 */
					-webkit-line-clamp: 1;
					/* 显示的行数 */
				}
			
				.boxRight2 {
					width: 100%;
					height: 20rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
					display: flex;
					align-items: center;
			
					p {
						margin-left: 8rpx;
					}
				}
			
				.boxRight3 {
					width: 500rpx;
					height: 28rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					color: #666666;
					padding-top: 24rpx;
					box-sizing: border-box;
					text-align: right;
				}
			}

		}

	}
</style>